@charset "utf-8";

/**
 
 * 17素材vip建站专区模块代码
 * 详尽信息请看官网：http://www.17sucai.com/pins/vip
 *
 * Copyright , 温州易站网络科技有限公司版权所有
 * 图片不能商用，代码可商用。
 
 * 请尊重原创，未经允许请勿转载。
 * 在保留版权的前提下可应用于个人或商业用途
 
**/
.section{margin: 0 auto;}
.section .container{width:1200px; border:solid 1px #eee; height:800px;}
.section .mod-title{padding-bottom:35px;text-align:center;color:#333}
.section .mod-title h2{font-size:36px;margin-bottom:17px}
.section .mode-list{ height: 798px; background:#fff; }

    .section .mode-list li:first-child {
        animation: fadeinB 1s;
    }

    .section .mode-list li:nth-child(2) {
        animation: fadeinB 1.5s;
    }

    .section .mode-list li:nth-child(3) {
        animation: fadeinB 2s;
    }

    .section .mode-list li:nth-child(4) {
        animation: fadeinB 2.5s;
    }

.section .mode-list .mode-item{ width: 226px; height: 798px; text-align: center; float: left; overflow: hidden; background: #fff; transition: width 1s;}
.section .mode-list .mode-wrap{ width: 746px; height: 798px;}
.section .mode-list .mode-view{ float: left; width: 226px; height: 798px; border-right: 1px solid #eee; opacity: 1;padding:70px 43px;}
.section .mode-list .mode-view h3{ font-size: 30px; padding-top: 52px; padding-bottom: 11px;}
.section .mode-list .mode-view h4{ font-size: 14px; color: #888; }
.section .mode-list .mode-view i{ display: block; width: 120px; height: 90px; margin: 80px auto 105px;}
.section .mode-list .mode-view ul{ padding-left: 20px; }
.section .mode-list .mode-view li{ float: left; width: 90px; height: 30px; line-height: 30px; margin: 0 5px 10px 5px; background: #EDEDED; }
.section .mode-list .mode-detail{ float: left; color: #fff; width: 519px; height: 798px; opacity: 0; border-right: 1px solid #eee;padding:70px 43px;}
.section .mode-list .mode-detail .detail-left,
.section .mode-list .mode-detail .detail-right{ width: 271px; height: 798px; }
.section .mode-list .mode-detail .detail-left{ float: left; overflow: hidden;}
.section .mode-list .mode-detail .detail-left i{ display: block; width: 120px; height: 90px; margin: 112px auto 70px; }
.section .mode-list .mode-detail .detail-left h3{ font-size: 30px; margin-bottom: 19px;}
.section .mode-list .mode-detail .detail-left h4{ font-size: 14px; padding: 0 25px; line-height: 1.7;}
.section .mode-list .mode-detail .detail-right{ float: left;}
.section .mode-list .mode-detail .detail-right ul{ padding: 20px 20px 0 30px; }
.section .mode-list .mode-detail .detail-right li{ margin-bottom: 16px; }
.section .mode-list .mode-detail .detail-right li h3{ width: 83px; height: 28px; border: 1px solid #fff; line-height: 28px; margin-bottom: 11px;font-size: 16px;}
.section .mode-list .mode-detail .detail-right li p{ text-align: left; line-height: 1.7; font-size: 14px;}
.section .mode-list .mode-detail .detail-right .get{ width: 100px; height: 31px; line-height: 31px; padding-left: 15px; color: #00CE52; display: block; margin-left: 30px; font-size: 16px; background: #fff url(../images/04-jt.png) no-repeat 84px center; text-align: left;}
.section .mode-list .mode-item-1 .mode-view i{ background: url(../images/04-img-1.png) no-repeat -120px 0; }
.section .mode-list .mode-item-1 .mode-detail .detail-left i{ background: url(../images/04-img-1.png) no-repeat 0 0; }
.section .mode-list .mode-item-2 .mode-view i{ background: url(../images/04-img-2.png) no-repeat -120px 0; }
.section .mode-list .mode-item-2 .mode-detail .detail-left i{ background: url(../images/04-img-2.png) no-repeat 0 0; }
.section .mode-list .mode-item-3 .mode-view i{ background: url(../images/04-img-3.png) no-repeat -120px 0; }
.section .mode-list .mode-item-3 .mode-detail .detail-left i{ background: url(../images/04-img-3.png) no-repeat 0 0; }
.section .mode-list .mode-item-4 .mode-view i{ background: url(../images/04-img-4.png) no-repeat -120px 0; }
.section .mode-list .mode-item-4 .mode-detail .detail-left i{ background: url(../images/04-img-4.png) no-repeat 0 0; }
.section .mode-list .mode-item.active{ width: 520px; }
.section .mode-list .mode-item.active .mode-wrap{ margin-left: -225px; }
.section .mode-list .mode-item.active .mode-view{ opacity: 0; }
.section .mode-list .mode-item.active .mode-detail{ opacity: 1; }

@media (min-width: 1600px) {
    .section .container{width:1440px; height:800px;}

    .section .mode-list .mode-item{ width: 272px; height: 798px; text-align: center; float: left; overflow: hidden; background: #fff; transition: width 1s;}
    .section .mode-list .mode-wrap{ width: 894px; height: 798px;}
    .section .mode-list .mode-view{ float: left; width: 272px; height: 798px; border-right: 1px solid #eee; opacity: 1;padding:70px 43px;}
    .section .mode-list .mode-view h3{ font-size: 30px; padding-top: 52px; padding-bottom: 11px;}
    .section .mode-list .mode-view h4{ font-size: 14px; color: #888; }
    .section .mode-list .mode-view i{ display: block; width: 120px; height: 90px; margin: 80px auto 105px;}
    .section .mode-list .mode-view ul{ padding-left: 20px; }
    .section .mode-list .mode-view li{ float: left; width: 90px; height: 30px; line-height: 30px; margin: 0 5px 10px 5px; background: #EDEDED; }
    .section .mode-list .mode-detail{ width: 621px; height: 798px;padding:70px 43px;}
    .section .mode-list .mode-detail .detail-left,
    .section .mode-list .mode-detail .detail-right{ width: 271px; height: 798px; }
    .section .mode-list .mode-detail .detail-left{ float: left; overflow: hidden;}
    .section .mode-list .mode-detail .detail-left i{ display: block; width: 120px; height: 90px; margin: 112px auto 70px; }
    .section .mode-list .mode-detail .detail-left h3{ font-size: 30px; margin-bottom: 19px;}
    .section .mode-list .mode-detail .detail-left h4{ font-size: 14px; padding: 0 25px; line-height: 1.7;}
    .section .mode-list .mode-detail .detail-right{ float: left;}
    .section .mode-list .mode-detail .detail-right ul{ padding: 20px 20px 0 30px; }
    .section .mode-list .mode-detail .detail-right li{ margin-bottom: 16px; }
    .section .mode-list .mode-detail .detail-right li h3{ width: 83px; height: 28px; border: 1px solid #fff; line-height: 28px; margin-bottom: 11px;font-size: 16px;}
    .section .mode-list .mode-detail .detail-right li p{ text-align: left; line-height: 1.7; font-size: 14px;}
    .section .mode-list .mode-detail .detail-right .get{ width: 100px; height: 31px; line-height: 31px; padding-left: 15px; color: #00CE52; display: block; margin-left: 30px; font-size: 16px; background: #fff url(../images/04-jt.png) no-repeat 84px center; text-align: left;}
    .section .mode-list .mode-item.active{ width: 622px; }
    .section .mode-list .mode-item.active .mode-wrap{ margin-left: -271px; opacity: 1; }
}